<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><?php echo config('system') ?></title>

</head>
<style>

    body{
        width:100%;
        height:100%;
        background:url('/static/img/login_bg.png');
        margin:0;
        padding:0;

    }
    .main{
        width:900px;
        height:500px;
        margin:0 auto;
        margin-top:8%;
    }
    .introduce{
        height:500px;
        width:350px;
        background:url('/static/img/login_middle_bg.png') no-repeat center center;
        float:left

    }
    .login{
        height:500px;
        width:550px;
        background:white;
        float:left
    }
    .icon{
        height:196px;
        width:196px;
        background:url('/static/img/123.png') no-repeat;
        z-index:999;
    }
    .des{
        font-size:18px;
        color:white;
        text-align: left;
        padding-left:20px;
        line-height:200%;
    }
    .head{
        width:550px;
        height:120px;
        font-size:30px;
        color:black;
        text-align: center;
        line-height:150px;
    }
    .input{
        font-size:28px;
    }
    .input div{
        width:450px;
        height:50px;
        border-bottom: 1px solid #ccc;
        margin:0 auto;
        margin-top:30px;
    }
    .input input{
        width:250px;
        border:none;
        outline: none;
        height:30px;
        margin-top:-20px;
        font-size:20px;
        padding-left:5px;
    }
    input::-webkit-input-placeholder {
        font-size:20px;
    }
    .button{
        width:550px;
        height:80px;
        margin-top:60px;
    }

    .btn{
        width:200px;
        height: 50px;
        background:#2073C4;
        border-radius: 50px;
        text-align: center;
        line-height:40px;
        margin:0 auto;
        display:block;
        font-size:20px;
        color:white;
    }

    .btn:hover{
        cursor: pointer;
    }

</style>
<body>
<div class="main">
    <div class="introduce">
        <div class="icon"></div>
        <div class="des">
            JinFu technology helpsBuild a better future
            <br>
            <span style="font-size:17px;margin-top:40px">让锦富技术构建美好未来</span>
        </div>
    </div>
    <div class="login">
        <div class="head">登录</div>
        <div class="input">
            <div>
                账号 : <input type="text" placeholder="请输入用户名" name="account" autocomplete="off">
            </div>
            <div>
                密码 : <input type="password" placeholder="请输入密码" name="password" autocomplete="off">
            </div>
        </div>
        <div class="button">
            <button class="btn">登录</button>
        </div>
    </div>
</div>
</body>

<script src="/static/js/jquery-3.3.1.min.js"></script>
<script src="/static/js/layer-3.1.1/layer.js"></script>

<script>
    $(".btn").on('click',function()
    {
        login();
    })

    $("body").on('keydown',function(e)
    {
        if(e.keyCode == 13)
        {
            login()
        }
    })

    //登录
    function login()
    {
        var account = $("[name='account']").val();
        var password = $("[name='password']").val();
        if(!account)
        {
            layer.alert('账号不能为空,请输入!',{icon:2,title:'警告'});
            return;
        }
        if(!password)
        {
            layer.alert('密码不能为空,请输入!',{icon:2,title:'警告'});
            return;
        }

        var index = layer.load();
        $.ajax({
            type:'post',
            url:'/bus/login/login',
            data:{account:account,password:password}
        }).then(function(res)
        {
            layer.close(index);
            if(res.code == 1)
            {
                layer.alert(res.msg,{icon:2,title:'错误'});
            }
            else{
                sessionStorage.setItem('userInfo',JSON.stringify(res.data));
                window.location.href='/index/index/index';
            }
        })

    }
</script>
</html>